
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body {
            background: url("img/timg.jpg");
        }

        .form-signin {
            max-width: 500px;
            padding: 15px;
            margin: 100px auto;
            background: rgba(233, 233, 233, 0.3);
            border-radius: 6px;
            color: white;
            text-align: center;
            color: #222;
        }

        .form-signin img {
            float: left;
        }
    </style>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="container" id="app">
    <form class="form-horizontal form-signin">
        <h2 class="form-signin-heading">用户管理系统</h2>
        <br>
        <br>
        <div class="form-group">
            <label for="inputEmail3" class="col-xs-2 control-label">账号</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputEmail3" v-model="loginName" placeholder="登录名" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-xs-2 control-label">密码</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword3" v-model="loginPassword" placeholder="密码"
                       required>
            </div>
        </div>

        <div class="form-group">
            <label for="inputPassword4" class="col-xs-2 control-label">验证码</label>
            <label for="inputPassword4" class="col-xs-4"><img src="verify"
                                                              onclick="this.src='verify?'+Math.random()"></label>
            <div class="col-xs-6">
                <input type="text" class="form-control" id="inputPassword4" v-model="verify" placeholder="验证码" required>
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="col-xs-12">
                <p style="color: red">{{message}}</p>
                <button type="button" class="btn btn-success btn-block btn-lg" @click="login()">登录</button>
            </div>
        </div>
    </form>


</div>
<script>
    new Vue({
        el: "#app",
        data: {
            message: '',
            loginName: "",
            loginPassword: "",
            verify: ""
        },
        methods: {
            login() {
                var vm = this;
                $.post("login", {loginName: this.loginName, loginPassword: this.loginPassword,verify: this.verify}, function (data) {
                    if (data.code == 200) {
                        location.href = "index.html"
                    } else {
                        vm.message = data.msg;
                    }
                })
            }
        }
    })
</script>
</body>
</html>